import { useState } from 'react'
import { Button, Checkbox, Form, Input, message } from 'antd';
import "antd/dist/antd.css";
import './login.css'
import { Outlet, useNavigate } from 'react-router-dom';
import { prlogin } from '../plugins/getlogin'
import { setlocal } from '../local/index'
import { Provider } from 'react-redux'
import store from '../store/index'
export const Login = () => {
    const onFinish = (values) => {
        prlogin(values).then(e => {
            setlocal('TOKEN', e.data.time)
            if (e.data.status === 201) {
                message.success({
                    content: '登录成功！',
                    className: 'custom-class',
                    style: {
                        marginTop: '20vh',

                    },
                });

                router('/main')
            }
            else {
                message.error({
                    content: '账号或密码输入错误！',
                    className: 'custom-class',
                    style: {
                        marginTop: '20vh',

                    },
                });

            }
        });


    };
    const onFinishFailed = (errorInfo) => {
        message.error({
            content: '请检查账号或密码是否输入错误！',
            className: 'custom-class',
            style: {
                marginTop: '20vh',

            },
        });
    };
    var style = {
        width: '100%',
    };
    const router = useNavigate()
    const [show, setshow] = useState(false);
    const register = () => {
        var form = document.querySelector('.form')
        form.style.display = 'none'
        setshow(true)
        router('/register')
    }
    const login = () => {
        var form = document.querySelector('.form')
        form.style.display = 'block'
        setshow(!true)
        router('/')
    }
    return (


        <Provider store={store}>
            <div className='login'>
                <div className='container'>
                    <div className='top'>
                        <div className={[show === false ? 'jump' : 'go']} onClick={login}>登录</div><div className={[show === true ? 'jump' : 'out']} onClick={register}>注册</div></div>
                    <Form
                        className='form'
                        name="basic"
                        labelAlign='left'
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="用户名"
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入用户名!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="密   码"
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入你的密码!',
                                },
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item
                            name="remember"
                            valuePropName="checked"
                            wrapperCol={{
                                offset: 8,
                                span: 12,
                            }}
                        >
                            <Checkbox>记住密码</Checkbox>
                        </Form.Item>

                        <Form.Item
                            wrapperCol={{
                                offset: 8,
                                span: 12,
                            }}
                        >

                            <Button type="primary" htmlType="submit" style={style} size='large'>
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                    <Outlet></Outlet>
                </div>

            </div>
        </Provider>
    )
}